import React from 'react'
import {View,FlatList,Text,ActivityIndicator,StyleSheet,Image} from 'react-native'
var REQUEST_URL = "https://raw.githubusercontent.com/facebook/react-native/0.51-stable/docs/MoviesExample.json";

export default class FetchBasics extends React.Component{
  constructor (props) {
    super(props)
    this.state = {isLoading:true}
  }
  componentDidMount () {
    this.getMoiveDatas()
  }
  getMoiveDatas () {
    fetch(REQUEST_URL)
      .then(response=>response.json())
      .then(responseJson=>{
        this.setState({
          isLoading:false,
          moveData:responseJson.movies
        })
      })
  }
  render () {
      return (
        <View style={styles.container} >
          {
              this.state.isLoading
              ? this.renderLoadingView()
              :<FlatList
                data={this.state.moveData}
                renderItem={this.renderMove}
                keyExtractor={(item)=>item.id}
              />
          }
        </View>
      )
  }
  renderLoadingView () {
    return (
      <View style={styles.container} >
        <ActivityIndicator />
        <Text>加载中....</Text>
      </View>
    )
  }
  renderMove ({item}) {
    return (
      <View style={styles.container} >
        <Image source={{ uri:item.posters.detailed }} style={styles.thumbnail} />
        <View style={styles.rightContainer}>
          <Text style={styles.title}>{item.title}</Text>
          <Text style={styles.year}>{item.year}</Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container:{
    flex: 1,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: '#F5FCFF'
  },
  rightContainer: {
    flex:1
  },
  title:{
    fontSize: 20,
    marginBottom: 8,
    textAlign: "center",
  },
  year: {
    textAlign: "center"
  },
  thumbnail: {
    width: 53,
    height:81
  },
  list: {
    paddingTop: 20,
    backgroundColor: "#F5FCFF"
  }
})